<template>
<!-- 稿件管理页面 -->
<div>
  <h1 style="color:orange">稿件管理页面</h1>
  <el-radio-group v-model="type">
    <!--  单选按钮的文字是头标签和尾标签之间的文字，单选按钮对应的数据是label属性的值  -->
    <el-radio-button label="1">烘焙食谱</el-radio-button>
    <el-radio-button label="2">烘焙视频</el-radio-button>
    <el-radio-button label="3">行业资讯</el-radio-button>
  </el-radio-group><!--  router.push('/personal/post')是跳转到发布页面  -->
  <el-button style="position: relative;top: 3px;left: 10px;" type="success" @click="router.push('/personal/post')">发布内容</el-button>
  <el-table :data="contentArr">
    <el-table-column type="index" label="编号"></el-table-column>
    <el-table-column prop="title" label="商品标题" width="100px"></el-table-column>
    <el-table-column prop="brief" label="商品摘要" width="300px"></el-table-column>
    <el-table-column prop="categoryName" label="商品类型"></el-table-column>
    <el-table-column label="商品封面" width="100px">
      <template slot-scope="scope">
        <!--  scope.row是表格中每行数据的对象(得到当前行对应的对象)，scope.$index是表格中每行数据的索引值  -->
        <img :src="scope.row.imgUrl" alt="" style="width: 80px;">
      </template>
    </el-table-column>
    <el-table-column prop="viewCount" label="浏览量"></el-table-column>
    <el-table-column prop="commentCount" label="评论量"></el-table-column>
    <el-table-column prop="createTime" label="发布时间"></el-table-column>
    <el-table-column label="操作" width="200px" fixed="right"><!--  fixed="right"作用是将表格的此列固定在右侧  -->
      <template slot-scope="scope">
        <!--  scope.row得到的是当前行对应的对象  -->
        <el-button size="mini" type="success" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>
<script>
export default {
  name: "PersonalManagementView",
  methods:{
    post(){//发布内容的@click="post"  可以对应这个方法
      //this.$router.push('/personal/post');//跳转到发布页面
    }
  }
}
</script>
<script setup>
import {ref} from "vue";
import router from "@/router";
const type=ref(1);
const contentArr=ref([
  {
    id:11,
    title:"入口即酥的超浓花生酱酥饼a",
    brief: "花生酱+花生油=超浓郁花生香 没有糖分，用了白砂糖 本是入口即酥 却又在酥后留下些许颗粒",
    imgUrl:"/imgs/a.jpg",
    type:"1",
    categoryName: "家常菜",
    viewCount: 8,
    commentCount: 0,
   createTime:"2023/03/27 19:51:45"
  },
  {
    id:12,
    title:"枣泥花式面包，好吃到爆",
    brief: "之前做了枣泥馅，配上花式面包，好吃到爆,枣泥花式面包的用料，肉松面包面团，见肉松面包",
    imgUrl:"/imgs/b.jpg",
    type:"1",
    categoryName: "面包",
    viewCount: 1,
    commentCount: 0,
    createTime:"2023/03/28 19:51:45"
  },
  {
    id:13,
    title:"酥脆培根叶 可芝士卷，人见人爱",
    brief: "人间人爱得培根平时一般都是放吐司里面做三明治吃今天培根要录脸啦哈哈哈",
    imgUrl:"/imgs/c.jpg",
    type:"1",
    categoryName: "家常菜",
    viewCount: 1,
    commentCount: 0,
    createTime:"2023/03/28 19:51:45"
  },
  {
    id:14,
    title:"开放式三明治，一份儿小清新快捷",
    brief: "昨夜下了很怕人的暴雨，清晨办公室上的薄荷微微搬动它的明子，一份儿小",
    imgUrl:"/imgs/d.jpg",
    type:"1",
    categoryName: "小食",
    viewCount: 1,
    commentCount: 0,
    createTime:"2023/03/28 16:16:24"
  },
  {
    id:15,
    title:"核桃葡萄干软，蔓越莓种面",
    brief: "葡萄干软软，核桃是，好处多多，不一一列举啦！蔓越莓",
    imgUrl:"/imgs/a.jpg",
    type:"1",
    categoryName: "面包",
    viewCount: 2,
    commentCount: 0,
    createTime:"2023/03/28 19:51:45"
  },
  {
    id:16,
    title:"蔓越莓绿豆糕，味道还不错值得一试",
    brief: "全家都很喜欢吃绿豆糕，但楼下甜品店的绿豆糕太甜了，那就自己动手做吧。",
    imgUrl:"/imgs/b.jpg",
    type:"1",
    categoryName: "小食",
    viewCount: 4,
    commentCount: 0,
    createTime:"2023/03/28 16:17:35"
  },
  {
    id:17,
    title:"心形火龙果椰蓉面包，任谁都抗拒不了",
    brief: "椰蓉的香味，任谁都抗拒不了吧正好还有半个红心火龙果做成了***嫩的小可爱",
    imgUrl:"/imgs/c.jpg",
    type:"1",
    categoryName: "小食",
    viewCount: 15,
    commentCount: 1,
    createTime:"2023/03/28 16:18:12"
  },
  {
    id:18,
    title:"爆浆抹茶甜甜圈面包，自带幸福感的小甜甜圈",
    brief: "爆浆抹茶甜甜圈面包好吃到起飞的爆浆抹茶甜甜圈面包，从里到外被抹茶包裹着",
    imgUrl:"/imgs/d.jpg",
    type:"1",
    categoryName: "小食",
    viewCount: 15,
    commentCount: 1,
    createTime:"2023/03/28 16:20:26"
  }
]);
</script>